<template>
  <div>
    <div>姓名： {{ person.name }}</div>
    <div>年龄： {{ person.age }}</div>
    <div>{{ foo }}, {{ bar }}</div>
    <slot name="slot-1"></slot>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  //   beforeCreate() {
  //     console.log("---- beforeCreate ----");
  //   },
  props: ["foo", "bar"],
  emits: ["hello"],
  setup(props, context) {
    // console.log("---- setup ----", this);
    // console.log("---- setup ----", props);
    console.log("---- setup ----", context);
    const person = reactive({ name: "张三", age: 14 });

    context.emit("hello", "你好，世界");

    return {
      person,
    };
  },
};
</script>
